<template>
  <el-dialog v-model="visible" :title="title" width="920" show-footer show-zoom resize @close="close">
    <template #default>
      <vxe-table :data="form.detail" :round="true" show-overflow :column-config="{resizable: true}" :row-config="{height: 100}" height="500">
        <vxe-column title="SKU/自定义SKU">
          <template #default="{ row }">
            {{ row.sku }}
          </template>
        </vxe-column>
        <vxe-column title="FNSKU/第三方SKU">
          <template #default="{ row }">
            {{ row.sku }}
          </template>
        </vxe-column>
        <vxe-column field="num" title="重量">
          <template #default="{ row }">
            {{ row.num || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="num" title="长宽高">
          <template #default="{ row }">
            {{ row.num || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="num" title="数量">
          <template #default="{ row }">
            {{ row.num || '--' }}
          </template>
        </vxe-column>
      </vxe-table>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getHeadBoxDetail } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const emits = defineEmits(['query'])

const props = defineProps({
  wareDataList: {
    type: Array,
    default: [],
  },
})

const data = reactive({
  form: {},
  title: '',
  handleType: null,
})
const { form, title, handleType } = toRefs(data)

const statusMap = new Map([
  ['edit', '箱数据修改'],
  ['view', '箱数据详情'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    detail: []
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getHeadBoxDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
.image-item{
  width: 60px;
  height: 60px;
}
</style>
